package myJs.search

import myJs.api.Api
import myJs.cps._
import myJs.myPkg.{ReactRouterDOM, layer}
import myJs.tool.Tool
import org.scalajs.dom.{URLSearchParams, html}
import shared.Pojo.CircSearch
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.core.facade.Hooks._
import slinky.core.facade.React
import slinky.web.html._

import scala.collection.immutable.SeqMap
import scala.scalajs.js
//import myJs.myPkg.i18n.ReactI18next
import myJs.Implicits._
import myJs.myPkg.jquery._
import org.scalajs.macrotaskexecutor.MacrotaskExecutor.Implicits._

/**
 * Created by yz on 21/1/2022
 */
@react object CircFormCp {

  case class Props(tableRsChange: (List[ujson.Obj]) => Unit)

  val component = FunctionalComponent[Props] { props =>

    val location = ReactRouterDOM.useLocation()
    val searchParams = new URLSearchParams(location.search)
    val geneNameP = searchParams.get("geneName").null2Empty
    val tabP = searchParams.get("tab").null2Empty
    val initGeneSymbol = if (tabP == "circRna" && geneNameP.nonBlank) geneNameP else ""
    val (geneSymbol, setGeneSymbol) = useState(initGeneSymbol)
    val (chr, setChr) = useState("")
    val (chrMap, setChrMap) = useState(SeqMap[String, String]())
    val (start, setStart) = useState("")
    val (end, setEnd) = useState("")
    val formRef = React.createRef[html.Form]

    object FTool {

      def startChange = (v: String) => {
        setStart(v)
      }

      def endChange = (v: String) => {
        setEnd(v)
      }

      def chrChange = (v: String) => {
        setChr(v)
      }

      def refreshChrMap = {
        Api.browseCirc.allChr.map { response =>
          val data = response
          setChr(data.head)
          setChrMap(data.optionMap)
        }
      }

      def showExample(eg: String) = () => {
        setGeneSymbol(eg)
      }

      def startExample(eg: String) = () => {
        setStart(eg)
      }

      def endExample(eg: String) = () => {
        setEnd(eg)
      }

      def geneSymbolChange = (v: String) => {
        setGeneSymbol(v)
      }

      def mySearch = () => {
        val index = layer.alert(Tool.loadingElement, Tool.layerOptions)
        val request = CircSearch.Request(geneName = geneSymbol, chr = chr, start = start, end = end)
        Api.browseCirc.search(request).map { datas =>
          layer.close(index)
          props.tableRsChange(datas)
        }
        ()
      }

      def reset = () => {
        setGeneSymbol("")
        setChr(chrMap.keyList.head)
        setStart("")
        setEnd("")
      }

    }

    useEffect(() => {
      FTool.refreshChrMap
    }, List()
    )

    useEffect(() => {
      if (initGeneSymbol.nonBlank) {
        FTool.mySearch()
      }
    }, List()
    )

    form(style := Style(marginTop = 40, marginBottom = 40), className := "form-horizontal", id := "form", ref := formRef,

      div(className := "myEachGroup form-group",
        label(className := "control-label col-sm-3", s"Gene Symbol:"),
        div(className := "col-sm-5",
          PureTypeaheadInputCp(value = geneSymbol, onChange = FTool.geneSymbolChange)
        ),
        label(className := "control-label", s"e.g., ",
          a(onClick := FTool.showExample("MTOR"), em("MTOR"))
        ),
      ),

      div(className := "myEachGroup form-group",
        label(className := "control-label col-sm-3", s"Chromosome:"),
        div(className := "col-sm-5",
          PureSelectCp(optionMap = chrMap, value = chr, onChange = FTool.chrChange)
        ),
      ),

      div(className := "myEachGroup form-group",
        label(className := "control-label col-sm-3", s"Start Location:"),
        div(className := "col-sm-5",
          PureInputCp(value = start, onChange = FTool.startChange, placeHolder = "Start position")
        ),
        label(className := "control-label", s"e.g., ",
          a(onClick := FTool.startExample("11121246"), em("11121246"))
        ),
      ),

      div(className := "myEachGroup form-group",
        label(className := "control-label col-sm-3", s"End Location:"),
        div(className := "col-sm-5",
          PureInputCp(value = end, onChange = FTool.endChange, placeHolder = "End position")
        ),
        label(className := "control-label", s"e.g., ",
          a(onClick := FTool.endExample("11122126"), em("11122126"))
        ),
      ),

      div(className := "form-group",
        div(className := "actions col-sm-offset-2 col-sm-3",
          button(style := Style(width = "90%"), `type` := "button", className := "btn btn-primary myBtn",
            onClick := FTool.mySearch,
            s" search",
          )
        ),
        div(className := "actions col-sm-3",
          button(style := Style(width = "95%"), `type` := "button", className := "btn btn-primary myBtn",
            onClick := FTool.reset,
            s" Reset",
          ),
        )
      ),

      div(className := "form-group",
        div(className := "actions col-sm-offset-1",
          p(
            em(
              b("Note"),
              ":Either gene symbol or chromosome locations should be specified to return the results.")
          )
        )

      )

    )

  }

  object STool {

  }

}
